<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
          样式的冲突
             -当我们通过不同的选择器，选中相同元素，并且为相同的样式设置不同的值是，此时就会发生样式冲突

             发生样式冲突时，应用那个样式由选择器的权重（优先级）决定、

             选择器的权重       优先级
                内联样式        1000
                id选择器        100
                类和伪类选择器    10
                元素选择器       1
                通配选择器       0
                继承的样式       没有优先级

                比较优先级时，需要将所有的选择器的优先级进行相加计算，
                最后优先级越高，则越优先显示（分组选择器是单独计算）

                选择器的累加不会超过其最大的数量级，类选择器再高也不会超过id选择器
                如果优先级计算后相同，此时则优先使用靠下的样式

                可以在某个样式的后边添加 ！important ，则此时该样式获取到最高的优先级，甚至超过内联样式
                注意：在开发中这个玩意一定要慎用
        */
       #box1{
           background-color: red;
       }
        div{
            background-color: green;
        }
        .red{
            background-color: yellow;
        }

    </style>
</head>
<body>
 <div id="box1" class="red"> 我是一个div</div>
</body>
</html>